<template>
  <view v-if="customerList" class="bg-[#F3F4F6]">
    <view class="c-br c-pd bg-white" v-for="item in customerList">
      <van-cell-group inset>
        <van-cell :title="item.name" :value="item.relative || '未设置关系'" :label="item.phone" icon="user"></van-cell>
      </van-cell-group>
      <view class="c-br mt-8px flex justify-end items-center">
        <view class="mr-8px"><van-button type="primary" size="small" v-if="item.state === 0" @click="handleShowRelative(item.id, 1)">授权</van-button></view>
        <view class="mr-8px"><van-button type="info" size="small" v-if="item.mainFlag !== 1 && item.phone" @click="handleUpdateLocaleCustomer(item.id, 3)">设为主用户</van-button></view>
        <view class="mr-8px"><van-button type="primary" size="small" @click="handleShowRelative(item.id, 4)">设置关系</van-button></view>
        <view class="mr-8px"><van-button type="danger" size="small" v-if="item.mainFlag !== 1" @click="handleUpdateLocaleCustomer(item.id, 2)">解绑用户</van-button></view>
      </view>
    </view>

    <van-popup position="bottom" round :show="state.show" @close="state.show = false">
      <view class="bg-white w-full">
        <van-picker show-toolbar value-key="text" :columns="state.relativeList" title="请选择关系类型" @cancel="state.show = false" @confirm="handlePickerConfirm" />
      </view>
    </van-popup>
  </view>
</template>

<script setup lang="ts">
import EquipRequest from '@/request/equipRequest';
import useModal from '@/hooks/useModal';
import useToast from '@/hooks/useToast';
import to from '@/utils/to';
interface IState {
  localeId: number;
  show: boolean;
  addRelative: any;
  relativeList: any[];
  chooseType: number;
  chooseCustomerId: number;
}

const { showModal } = useModal();
const { showToast } = useToast();
const state = reactive<IState>({ localeId: 0, show: false, addRelative: '', relativeList: ['父亲', '母亲', '子女', '老公', '老婆', '哥哥', '弟弟', '妹妹', '亲戚', '朋友', '同事', '恋人', '自定义关系'], chooseType: 0, chooseCustomerId: 0 });
const customerList = ref<ILocaleCustomerRes[]>();

onLoad((options) => {
  if (!options) return;
  state.localeId = options.id;
  listLocaleUser(options.id);
});

const listLocaleUser = (id: number) => {
  EquipRequest.ListCustomerByLocale({ localeId: id, hasLoading: true }).then((res) => {
    if (res.data) {
      customerList.value = res.data;
    }
  });
};

const handleUpdateLocaleCustomer = (id: number, type: number) => {
  showModal(type === 3 ? '是否将该用户设为主用户？' : '是否解绑该用户？', {
    showCancel: true,
    success: (res) => {
      if (res.confirm) {
        EquipRequest.UpdateLocaleCustomer({ localeId: state.localeId, customerId: id, type: type }).then((res) => {
          showToast('操作成功', 'success');
        });
      }
    },
  });
};

const handleShowRelative = (customerId: number, type: number) => {
  state.show = true;
  state.chooseType = type;
  state.chooseCustomerId = customerId;
};

const handlePickerConfirm = async (event: any) => {
  const value = event.detail.value;
  if (value === `自定义关系`) {
    state.show = false;
    const [err, success] = await to(showModal('', { editable: true, showCancel: true }, `请输入自定义关系`));
    if (err) return;
    if (success.confirm) state.addRelative = success.content;
    else return;
  } else {
    state.addRelative = value;
  }
  EquipRequest.UpdateLocaleCustomer({ localeId: state.localeId, customerId: state.chooseCustomerId, relative: state.addRelative, type: state.chooseType }).then((res) => {
    showToast('操作成功', 'success');
    listLocaleUser(state.localeId);
  });
};
</script>
